<!DOCTYPE html>
{% load i18n %}
{% load sentry_assets %}
<html lang="en">
  <head>
    {% script src=ac_js_src %}{% endscript %}
    <style>
      {% include 'sentry/integrations/jira/aui-prototyping.9.1.5.css' %}
      body {
        background: transparent;
      }
      .container {
        padding: 30px;
      }
      .aui-message::after {
        font-family: arial, sans-serif;
        content: 'i';
        font-size: 13px;
        line-height: 16px;
        width: 16px;
        height: 16px;
        text-align: center;
        border-radius: 50%;

        color: #fff;
        font-weight: bold;
        background: var(--aui-message-info-icon-color);
      }
    </style>
  </head>
  <body>
    <div class="container">
      {% if error_message %}
      <div class="aui-message aui-message-info">
        <h2>Error</h2>
        <p>{{ error_message }}</p>
      </div>

      {% elif refresh_required %}
      <div class="aui-message aui-message-info">
        <h2>Error</h2>
        <p>
          {% trans "This page has expired, please refresh to view the Sentry issue" %}
        </p>
      </div>

      {% elif issue_not_linked %}
      <div class="aui-message aui-message-info">
        <h2>Issue not linked</h2>
        <p>{% trans "This Sentry issue is not linked to a Jira issue" %}</p>
      </div>
      {% else %}

      {% for group in groups %}
      <div>
        <h2>{{ group.type }}</h2>
        <p><a href="{{ group.title_url }}" target="_blank">{{ group.title }}</a></p>
        <br />

        <!-- EVENTS GROUP -->
        <div class="aui-group">
          <div class="aui-item">
            <h4>{% trans "Events" %}</h4>
          </div>
        </div>

        <div class="aui-group">
          <div class="aui-item" >
            <span>{% trans "Last 24 hours:" %}</span>
            <span class="aui-badge">{{ group.stats_24hr }}</span>
          </div>
        </div>
        <div class="aui-group">
          <div class="aui-item">
            <span>{% trans "Last 14 days:" %}</span>
            <span class="aui-badge">{{ group.stats_14d }}</span>
          </div>
        </div>
      </div>

      <!-- FIRST SEEN GROUP -->
      <div class="aui-group">
        <div class="aui-item">
          <h4>{% trans "First Seen" %}</h4>
        </div>
      </div>

      <div class="aui-group">
        <div class="aui-item" style="width:75px;">
          <span class="left-grid">{% trans "Date:" %}</span>
        </div>
        <div class="aui-item">
          <span class="right-grid">{{ group.first_seen }} UTC</span>
        </div>
      </div>

      {% if group.first_release %}
      <div class="aui-group">
        <div class="aui-item" style="width:75px;">
          <span class="left-grid">{% trans "Release:" %}</span>
        </div>
        <div class="aui-item">
          <span class="right-grid">
            <a href="{{ group.first_release_url }}" target="_blank">{{ group.first_release }}</a>
          </span>
        </div>
      </div>
      {% endif %}

      <!-- LAST SEEN GROUP -->
      <div class="aui-group">
        <div class="aui-item">
          <h4>{% trans "Last Seen" %}</h4>
        </div>
      </div>

      <div class="aui-group">
        <div class="aui-item" style="width:75px;">
          <span class="left-grid">{% trans "Date:" %}</span>
        </div>
        <div class="aui-item">
          <span class="right-grid">{{ group.last_seen }} UTC</span>
        </div>
      </div>

      {% if group.last_release %}
      <div class="aui-group">
        <div class="aui-item" style="width:75px;">
          <span class="left-grid">{% trans "Release:" %}</span>
        </div>
        <div class="aui-item">
          <span class="right-grid">
            <a href="{{ group.last_release_url }}" target="_blank">{{ group.last_release }}</a>
          </span>
        </div>
      </div>
      {% endif %}

      <br/>
      {% if not forloop.last %}
      <hr style="opacity:0.5;" />
      {% endif %}

      {% endfor %}
      {% endif %}
    </div>
  </body>
</html>
